<!-- 2023年4月14日 18点16分 gpd 新增地址 -->
<template>
	<view class="AddAddressManagement">
		<!-- 地址修改页面主体 -->
		<view class="AddAddressManagement_editBody">
			<view class="AddAddressManagement_editDiv">
				<p style="font-weight: bold;font-size: 15px;margin-top: 3%;width: 20%;float: left;">收货人</p>
				 <input v-model="userAddressData.addressConsignee" style="width:60%;float: left;margin-top: 3%;" class="weui-input" maxlength="6" placeholder="请输入收货人名称" />
			</view>
			<view class="AddAddressManagement_editDiv">
				<p style="font-weight: bold;font-size: 15px;margin-top: 3%;width: 20%;float: left;">手机号码</p>
				 <input v-model="userAddressData.addressTelephoneShift" style="width:60%;float: left;margin-top: 3%;" class="weui-input" maxlength="11" type="number" placeholder="请输入手机号" />
			</view>
			<view class="AddAddressManagement_editDiv">
				<p style="font-weight: bold;font-size: 15px;margin-top: 3%;width: 20%;float: left;">所在地区</p>
				<input @click="show=true" v-model="value" style="width:60%;float: left;margin-top: 3%;" class="weui-input"  placeholder="请输入收货人名称" />
				<u-picker :show="show" @cancel="closeShow" ref="uPicker" :columns="provinceData" keyName="shortname" @confirm="confirm" @change="areaChangeHandler"></u-picker>
			</view>
			<view class="AddAddressManagement_editDiv">
				<p style="font-weight: bold;font-size: 15px;margin-top: 3%;width: 20%;float: left;">详细地址</p>
				<input  v-model="userAddressData.addressDetailed" style="width:60%;float: left;margin-top: 3%;" class="weui-input" maxlength="50" placeholder="请输入详细地址" />
			</view>
		</view>
		<button style="width: 80%;margin-top: 20%;" type="warn" @click="addUserAddress">保存</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show: false,
				// 绑定所在区域的值
				value:'',
				// 获取登录后用户的详细信息
				user:'',
				// 获取登陆后用户的id
				userId:'',
				// 省 数据
				provinceData: [],
				// 市 数据
				cityData: [],
				// 县 数据
				countyData: [],
				// 省-市-县
				areaJoint: '',
				userAddressData:{
					id:'',
					userId:'',
					// 收货人
					addressConsignee:'',
					// 所在省份id
					addressLocationProvinceId:'',
					// 所在市id
					addressLocationCityId:'',
					// 所在县id
					addressLocationCountyId:'',
					// 所在省份名称
					addressLocationProvince:'',
					// 所在市名称
					addressLocationCity:'',
					// 所在县名称
					addressLocationCounty:'',
					// 详细地址
					addressDetailed:'',
					// 手机号
					addressTelephoneShift:'',
					
				},
				
			}
		},
		methods:{
			// 初始化查询所有省份
			getAllprovince(){
				this.$myRequest({
					url:'/shArea/getAreaList',
				}).then(res=>{
					this.provinceData = res.data.data.provinceData
					this.cityData = res.data.data.areaData
					this.countyData = res.data.data.countyData
				})
			},
			// 城市选择器 每次滑动选择触发方法
			areaChangeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.cityData[index])
					picker.setColumnValues(2, this.countyData[index])
				} else if (columnIndex === 1) {
					picker.setColumnValues(2, this.countyData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.value = ''
				this.userAddressData.addressLocationProvinceId = e.value[0].id
				this.userAddressData.addressLocationProvince = e.value[0].name
				this.userAddressData.addressLocationCity = e.value[1].name
				this.userAddressData.addressLocationCounty = e.value[2].name
				this.userAddressData.addressLocationCityId = e.value[1].id
				this.userAddressData.addressLocationCountyId =e.value[2].id
				e.value.forEach((item,index) => {
					if (index > 0) {
						this.value += '-' + item.shortname 
					} else {
						this.value += item.shortname
					}
				})
				this.show = false
			},
			// 关机省市县选择
			closeShow(){
				this.show = false
			},
			// 新增用户地址
			addUserAddress(){
				this.$myRequest({
					url:'/userAddress/addUserAddress',
					data:JSON.stringify(this.userAddressData),
					dataType:'json',
					method:'POST',
				}).then(res=>{
					
					uni.showToast({
						title: '发布成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 3000
					})
					uni.navigateTo({
						url:'/pages/my/AddressManagement'
					})
				})
			}
		},
		onLoad() {
			this.user = wx.getStorageSync("user")
			this.userAddressData.userId = this.user.id
			// 初始化查询所有省份
			this.getAllprovince()
		}
	}
</script>

<style>
	.AddAddressManagement{
		width: 100%;
		height: 890px;
		background-color: #F4F4F4;
		overflow: hidden;
	}
	.AddAddressManagement_editBody{
		width: 92%;
		margin-top: 4%;
		margin-left: 4%;
		overflow: hidden;
		height: 260px;
		background-color: white;
		border-radius: 20px 20px 20px 20px;
	}
	.AddAddressManagement_editDiv{
		width: 88%;
		height: 40px;
		margin-top: 4%;
		margin-left: 4%;
		border-bottom: 1px solid #efefef;
		overflow: hidden;
	}
</style>